<template>
  <el-container>
    <SignInDialog />

    <!-- v-loading="noToken" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" -->
    <el-container>
      <el-aside width="auto">
        <AutoNav />
      </el-aside>
      <el-main>
        <!-- <el-header>
          <Nav :menuList="menuList" />
        </el-header> -->
        <template v-if="!noToken">
          <router-view />
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import errormap from "@/utils/errormap";
import storage from "@/utils/storage";
import types from "@/store/types";
import routes from "./router/routes";
import { mapActions, mapGetters, mapMutations } from "vuex";


import Nav from "./components/nav";
import AutoNav from "./components/autoNav";
import SignInDialog from "./components/SignInDialog";
import store from "@/store";

export default {
  data() {
    return {
      loading: false,
      menuList: [],
    };
  },
  components: {
    AutoNav,
    Nav,
    SignInDialog
  },
  mounted() {
    this.checkLocalTokenValid();

    // this.menuList = routes.filter(item => {
    //   return !!item.name;
    // }).map(item => {
    //   return {
    //     index: item.path,
    //     title: item.meta.title
    //   };
    // });
  },
  watch: {
    requestErrorCode: {
      deep: true,
      handler(code) {
        // this.$message({
        //   showClose: true,
        //   message: errormap[code],
        //   type: "error"
        // });
        this.$notify.error({
          title: "Oops!",
          message: errormap[code],
          position: "bottom-left"
        });
      }
    }
  },
  computed: {
    ...mapGetters([
      "noToken",
      "accessToken",
      "name",
      "requestErrorCode"
    ]),
    shit() {
      return this.$route.path;
    }
  },
  methods: {
    // ...mapActions([
    //   "getCsrfToken"
    // ]),
    // async waitCsrfTokenLoading() {
    //   this.loading = true;
    //   try {
    //     await this.getCsrfToken();
    //   } catch (error) {
    //     alert("启动失败");
    //   }
    //   this.loading = false;
    // },
    // ...mapMutations({
    //   syncVuexTokenStatus: types.CHANGE_ACCESS_TOKEN
    // }),
    ...mapActions([
      "updateUserProfile"
    ]),
    async checkLocalTokenValid() {
      const tokens = storage.get("TOKEN");
      const id = storage.get("USER");
      if (tokens !== null) {
        // this.syncVuexTokenStatus({
        //   accessToken: tokens["access_token"]
        // });
        store.commit(types.CHANGE_ACCESS_TOKEN, {
          accessToken: tokens["access_token"]
        });
      }

      if (this.noToken) {
        this.$message("请先登陆");
        return;
      }
      this.$notify.info({
        title: "本地存在用户登陆信息",
        message: id,
        position: "bottom-right"
      });

      try {
        await this.updateUserProfile();
        this.$notify.info({
          title: "成功登陆",
          message: this.name,
          position: "bottom-right",
          type: "success"
        });
      } catch (error) {
        this.$message.warning("个人信息获取失败，请尝试重新登陆，还不行可能是服务器炸了");
      }

    }
  }
};
</script>


<style>
html,
body {
  margin: 0;
  height: 100%;
}
div {
  box-sizing: border-box;
}
header.el-header {
  padding: 0;
}
.el-container {
  height: 100%;
}
.el-aside {
  display: inline-block !important;
  /* background-color: rgb(84, 92, 100); */
}
main.el-main {
  padding: 0;
  height: 100%;
}
.el-table {
  margin: 0 auto;
  text-align: left;
}
</style>
